<template>
    <div class="d-flex flex-column flex-lg-row flex-column-fluid"
        :style="{ backgroundImage: `url(${backgroundImage})` }">
        <!--begin::Aside-->
        <div class="d-flex flex-lg-row-fluid">
            <!--begin::Content-->
            <div class="d-flex flex-column flex-center pb-0 pb-lg-10 p-10 w-100">
                <!--begin::Image-->
                <img class="theme-light-show mx-auto mw-100 w-150px w-lg-450px mb-10 mb-lg-20"
                    src="/media/bg/agency.png" alt="">
                <!-- <img class="theme-dark-show mx-auto mw-100 w-150px w-lg-300px mb-10 mb-lg-20" src="/media/bg/agency-dark.png"
                        alt=""> -->
                <!--end::Image-->

                <!--begin::Title-->
                <!-- <h1 class="text-gray-800 fs-2qx fw-bold text-center mb-7">
                    小诗科技，低代码平台。
                </h1> -->
                <!--end::Title-->

                <!--begin::Text-->
                <div class="text-gray-600 fs-base text-center fw-semibold">
                    <!-- 本平台实现了电子病历，影像学，实验室检验，患者信息，检验套餐，患者绑定病历，处方，就诊记录，
            <br>
            医院信息维护，科室管理，医院级别，药品管理，药商管理，科室分类，科室管理，
            <br>
            患者注册，上传影像学报告，实验室检查项配置，授权中心，系统平台，日志平台，附件平台，OMP，WEB端监控等。 -->
                    <!-- <br> -->
                    <!-- , <a href="#" class="opacity-75-hover text-primary me-1">the blogger</a> -->

                    <!-- introduces a person they’ve interviewed <br> and provides some background information about
  
            <a href="#" class="opacity-75-hover text-primary me-1">the interviewee</a>
            and their <br> work following this is a transcript of the interview. -->
                </div>
                <!--end::Text-->
            </div>
            <!--end::Content-->
        </div>
        <!--begin::Aside-->

        <!--begin::Body-->
        <div class="d-flex flex-column-fluid flex-lg-row-auto justify-content-center justify-content-lg-end p-12">
            <!--begin::Wrapper-->
            <div class="bg-body d-flex flex-column flex-center rounded-4 w-md-600px p-10">
                <!--begin::Content-->
                <div class="d-flex flex-center flex-column align-items-stretch h-lg-100 w-md-400px">
                    <!--begin::Wrapper-->
                    <div class="d-flex flex-center flex-column flex-column-fluid pb-15 pb-lg-20">
                        <!--begin::Form-->
                        <div class="form w-100 fv-plugins-bootstrap5 fv-plugins-framework" id="kt_sign_in_form">
                            <!--begin::Heading-->
                            <div class="text-center mb-11">
                                <!--begin::Title-->
                                <h1 class="text-gray-900 fw-bolder mb-3">
                                    小诗科技2.0平台...
                                </h1>
                                <!--end::Title-->
                            </div>
                            <!--begin::Heading-->

                            <!--begin::Input group--->
                            <div class="fv-row mb-8 fv-plugins-icon-container fv-plugins-bootstrap5-row-valid">
                                <!--begin::Email-->
                                <label class="font-size-h6 font-weight-bolder text-dark">账号</label>

                                <div class="input-icon">
                                    <input class="form-control form-control-solid h-auto py-7 px-10 rounded-lg"
                                        type="text" name="account" ref="account" v-model="form.account"
                                        autocomplete="off" placeholder="请输入">
                                    <span><i class="fas fa-user-tie icon-lg"></i></span>
                                </div>
                            </div>

                            <!--end::Input group--->
                            <div class="fv-row mb-3 fv-plugins-icon-container fv-plugins-bootstrap5-row-valid">
                                <div class="d-flex flex-stack mb-2">
                                    <label class="font-size-h6 font-weight-bolder text-dark pt-5">密码</label>
                                </div>
                                <div id="example-input-group-2" label="" label-for="example-input-2">
                                    <div class="input-icon">
                                        <input class="form-control form-control-solid h-auto py-7 px-10 rounded-lg"
                                            type="password" name="password" ref="password" v-model="form.password"
                                            autocomplete="off" placeholder="请输入">
                                        <span><i class="fas fa-lock icon-lg"></i></span>
                                    </div>
                                </div>
                            </div>
                            <!--end::Input group--->
                            <div class="fv-row mb-3 fv-plugins-icon-container fv-plugins-bootstrap5-row-valid">
                                <!--begin::Label-->
                                <label class="font-size-h6 font-weight-bolder text-dark">验证码</label>
                                <!--end::Label-->
                                <!--begin::Input-->
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="input-icon">
                                            <input class="form-control form-control-solid h-auto py-7 px-10 rounded-lg"
                                                type="text" name="validateCodes" ref="validateCode"
                                                v-model="form.validateCode" autocomplete="off" placeholder="请输入">
                                            <span><i class="fas fa-passport icon-lg"></i></span>
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <img :src="form.validImage" alt="" class="h-30px">
                                        <b-link href="javascript:void(0)" @click="initValidate">换一张</b-link>
                                    </div>
                                </div>
                            </div>

                            <!--begin::Wrapper-->
                            <div class="d-flex flex-stack flex-wrap gap-3 fs-base fw-semibold mb-8">
                                <div></div>

                                <!--begin::Link-->
                                <!-- <a href="/metronic8/demo1/authentication/layouts/overlay/reset-password.html" class="link-primary">
                    Forgot Password ?
                  </a> -->
                                <!--end::Link-->
                            </div>
                            <!--end::Wrapper-->

                            <!--begin::Submit button-->
                            <div class="d-grid mb-10">
                                <button fab x-large dark class="btn btn-lg btn-primary w-100 mb-5" @click="login"
                                    ref="kt_login_signin_submit">登录</button>
                            </div>
                            <!--end::Submit button-->

                            <!--begin::Sign up-->
                            <!-- <div class="text-gray-500 text-center fw-semibold fs-6">
                  Not a Member yet?
  
                  <a href="/metronic8/demo1/authentication/layouts/overlay/sign-up.html" class="link-primary">
                    Sign up
                  </a>
                </div> -->
                            <!--end::Sign up-->
                        </div>
                        <!--end::Form-->

                    </div>
                    <!--end::Wrapper-->
                    <!--begin::Footer-->
                    <div class=" d-flex flex-stack">
                        <div class="d-flex fw-semibold text-primary fs-base gap-5">
                            <a href="https://gitee.com/jehc" target="_blank">关于我们</a>&nbsp;&nbsp;

                            <a href="https://gitee.com/jehc" target="_blank">ICP备案</a>&nbsp;&nbsp;

                            <a href="https://gitee.com/jehc" target="_blank">公司信息</a>
                        </div>
                    </div>
                    <!--end::Footer-->
                </div>
                <!--end::Content-->
            </div>
            <!--end::Wrapper-->
        </div>
        <!--end::Body-->
    </div>
</template>

<!-- 加载登录自定义页面样式 -->
<style lang="scss" scoped>
.bgi-attachment-fixed {
    background-attachment: fixed;
}

.shadow-sm {
    box-shadow: 0 0.1rem 1rem 0.25rem #fff !important;
}

.form-control.form-control-solid {
    background-color: #fff !important;
}
</style>
<script>
import KTUtil from "@/assets/js/components/util";
import apiUtil from "@/core/util/apiUtil.js";
import { handleAlert, setLocalItem, getLocalItem } from "@/core/util/jehcUtil.js";
import Router from "@/router.js";
export default {
    name: "login",
    data() {
        return {
            state: "signin",
            form: {
                account: "",
                password: "",
                validateCode: "",
                validImage: ""
            }
        };
    },
    computed: {
        backgroundImage() {
            return (
                process.env.BASE_URL + "media/bg/bg10.jpeg"
            );
        },
    },
    mounted() {
        this.initValidate();//初始化加载验证码
    },
    methods: {
        showForm(form) {
            this.state = form;
            var form_name = "kt_login_" + form + "_form";
            KTUtil.animateClass(
                KTUtil.getById(form_name),
                "animate__animated animate__backInUp"
            );
        },
        initValidate() {
            this.initValidateCode().then(data => {//验证码
                this.form.validImage = String(data)
            })
        },
        initValidateCode() {
            let validImage = ''
            return new Promise((resolve) => {
                apiUtil.query(process.env.VUE_APP_OAUTH_API + "/JSessionId")
                    .then(({ data }) => {
                        setLocalItem("JEHC-SESSION-ID", data.data);
                        validImage = process.env.VUE_APP_OAUTH_API + "/verify?date=" + new Date().getTime() + "&sessionId=" + data.data;
                        resolve(validImage)
                    })
            })
        },
        login() {
            let account = this.form.account;
            let password = this.form.password;
            let validateCode = this.form.validateCode;
            if ('' === account) {
                handleAlert("请输入账号", "warning", 3);
                this.$refs.account.focus()
                return false;
            }
            if ('' === password) {
                handleAlert("请输入密码", "warning", 3);
                this.$refs.password.focus()
                return false;
            }
            if ('' === validateCode) {
                handleAlert("请输入验证码", "warning", 1);
                this.$refs.validateCode.focus()
                return false;
            }
            // 设置提交按钮提交时样式
            const submitButton = this.$refs["kt_login_signin_submit"];
            submitButton.classList.add("spinner", "spinner-light", "spinner-right");
            let param = { account: account, password: password, validateCode: validateCode };//组装参数
            apiUtil.post(process.env.VUE_APP_OAUTH_API + "/login", param).then(({ data }) => {// 发送登录请求
                if (data.success == false) {
                    handleAlert(data.message, "error", 3);
                    //移除登录按钮样式
                    submitButton.classList.remove("spinner", "spinner-light", "spinner-right");
                    //刷新验证码
                    this.initValidate();
                } else {
                    setLocalItem("token", data.data);
                    // this.$router.push({ path: "/dashboard" })
                    const JEHC_ROUTER_NEED_LOAD = "JEHC_ROUTER_NEED_LOAD";
                    setLocalItem(JEHC_ROUTER_NEED_LOAD, 1);
                    this.$router.push("/dashboard");
                }
            }).catch(({ response }) => {
                handleAlert("登录失败", "error", 3);
                //移除登录按钮样式
                submitButton.classList.remove(
                    "spinner",
                    "spinner-light",
                    "spinner-right"
                );
                //刷新验证码
                this.initValidate();
            });
            return false;
        }
    }
};
</script>